<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>发现</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
</head>

<style>
.ind_user{
  background: #fff;
}
.ind_user_left{
  float:left;
  padding:1.5rem 1.3rem;
}
.map_user{
  float:right;
}
.ind_user_img{
  width:4rem;
  display: inline-block;
  vertical-align: middle;
}
.ind_user_txt{
  display: inline-block;
  vertical-align: middle;
  margin-left:1.5rem;
}
.ind_user_txt h5{
  font-size: 1.4rem;
  color: #0c0c0c;
  line-height: 1;
}
.ind_user_txt p{
  font-size: 1.1rem;
  color: #999999;
  margin-top:0.95rem;
  line-height: 1;
}
.map_user1{
  display: inline-block;
  margin-left:1.3rem;
}
.map_user{
  padding:1.5rem 1.3rem;
}
.map_user1 img{
  height:1.7rem;
  margin:0 auto;
}
.map_user1 span{
  font-size: 1.1rem;
  color: #333333;
  line-height: 1;
  margin-top: 0.55rem;
}

.spacing10 {
  width: 100%;
  height: 1rem;
  background: #f5f5f5;
}
.main_class {
  padding:0 1.3rem;
}
.main_class > ul {
  padding: 0;
  margin: 0;
  padding:2rem 0;
  background:#fff;
  box-shadow: 0rem 0.1rem 0.95rem 0.05rem
		rgba(184, 183, 183, 0.25);
	border-radius: 0.7rem;
}
.main_class > ul > li {
  width: 33.33%;
  float: left;
  text-align: center;
}
.main_class > ul > li img{
  width:3.6rem;
  margin:0 auto;
}
.main_class > ul > li .main_class1{
  margin-top:1.55rem;
  border-right:0.05rem solid #e5e5e5;
}
.main_class > ul > li:last-child .main_class1{
  border-right:none;
}
.main_class > ul > li h5{
	font-size: 1.39rem;
  line-height: 1;
	font-weight: normal;
	font-stretch: normal;
	color: #000000;
  text-align: center;
}
.main_class > ul > li h6{
  font-size: 1.17rem;
	font-weight: normal;
	font-stretch: normal;
	color: #333333;
  line-height: 1;
  margin-top:0.85rem;
  text-align: center;
}
.mon_g{
  width: 100%;
  padding:0 1.3rem;
  text-align: center;
  margin: 0;
}
.mon_g1{
  background-color: #ffffff;
	box-shadow: 0rem 0.1rem 0.95rem 0.05rem
		rgba(184, 183, 183, 0.25);
	border-radius: 0.7rem;
  overflow: hidden;
}
.mon_left {
  width: 12.3rem;
  height: 6.85rem;
  float: left;
  padding: 0;
  background: url(../../image/share/share_index_sec2_1.png) center/cover no-repeat;
}
.mon_left p {
  color: #fff;
  margin-bottom: 0;
  margin-top: 0;
  letter-spacing: 0;
  font-size: 1.4rem;
  text-align: center;
  line-height: 6.85rem;
}
.mon_right {
  width: calc(100% - 12.3rem);
  float: right;
  background: #fff;
  padding:2rem 1.5rem;
}
.mon_right p {
  color: #333;
  font-size: 1.2rem;
  padding: 0;
  line-height: 1.55rem;
  color:#666;
}
.share {
  padding: 0 1.3rem;
  position: relative;
}
.share1{
  background-color: #ffffff;
	box-shadow: 0rem 0.1rem 0.95rem 0.05rem
		rgba(184, 183, 183, 0.25);
	border-radius: 0.7rem;
  overflow: hidden;
  padding:2rem 0.95rem 2rem 2.3rem;
  position: relative;
}
.share1 > h5 {
  width: 100%;
  font-size: 1.4rem;
  line-height: 1;
  color: #000;
  position: relative;
}
.share1 a{
  position: absolute;
  top:2rem;
  right:0.9rem;
  font-size:1.3rem;
  color:#666666;
  line-height: 1;
}

.share_con{
  margin-top:2.3rem;
}
.share_con_l {
  width: 7.6rem;
  float: left;
}
.share_con_r {
  width: calc(100% - 7.6rem);
  height:7.6rem;
  float: right;
}
.share_con_r1{
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  margin: 0;
}
.share_con_r p {
  font-size: 1.3rem;
  color: #1a1919;
  line-height: 1;
  margin: 0;
  text-align: center;
}
.share_con_r p span {
  color:#ed6a20;
  font-size: 1.8rem;
  font-weight: normal;
  line-height: 1;
}
.share_btn {
  width: 100%;
  margin-top: 3rem;
  padding:0 1.3rem;
}
.share_btn a{
  width:100%;
  text-align: center;
  height: 4.4rem;
	background-color: #ed6a20;
	border-radius: 2.2rem;
  line-height: 4.4rem;
  font-size: 1.5rem;
  color:#fff;
}
.share_index_tk{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index: 100;
  /*display: none;*/
}
.share_index_tk_bg{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color: #000000;
  opacity: 0.66;
}
.share_index_tk_con{
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
   -ms-transform: translate(-50%,-50%);
   -o-transform: translate(-50%,-50%);
   transform: translate(-50%,-50%);
   padding:0 3.75rem;
   width:100%;
}
.share_index_tk_f1{
  width:100%;
  background:url(../../image/share/share_index_share6.png) center/cover no-repeat;
  padding:2.05rem 2rem 2.65rem;
}
.share_index_tk_f1_img{
  width:4rem;
  float:left;
}
.share_index_tk_f1_txt{
  width:calc(100% - 4rem);
  float:right;
  padding:0.3rem 0 0 1.55rem;
}
.share_index_tk_f1_txt h5{
  font-size:1.4rem;
  color:#fff;
  line-height: 1;
}
.share_index_tk_f1_txt p{
  font-size:1.1rem;
  color:#fff;
  line-height: 1;
  margin-top:0.95rem;
}
.share_index_tk_f2{
  background: #fff;
  padding:2rem 0 3rem 0;
  text-align: center;
  border-radius: 0 0 0.7rem 0.7rem;
}
.share_index_tk_f2 img{
  width:60%;
  margin:0 auto;
}
.share_index_tk_f2 h5{
  width: 9.3rem;
	height: 1.8rem;
  line-height: 1.8rem;
	background-color: #333333;
	border-radius: 0.9rem;
  margin:0 auto;
  color:#fff;
  margin-top:1.85rem;
}
.share_index_tk_f2 h6{
  text-align: center;
  font-size:1.3rem;
  color:#999999;
  line-height: 1;
  margin-top:1.85rem;
}
.share_index_tk_f3{
  width:100%;
  background-color: #f5f5f5;
	border-radius: 0.7rem;
  margin-top:-0.05rem;
}
.share_index_tk_f3 ul li{
  width:25%;
  float:left;
  padding:1.5rem 0 2rem 0;
  text-align: center;
}
.share_index_tk_f3 ul li img{
  width:3.95rem;
  margin:0 auto;
}
.share_index_tk_f3 ul li span{
  font-size: 1.2rem;
  color: #000;
  line-height: 1;
  display: block;
  margin-top: 0.95rem;
  text-align: center;
}
.share_index_tk_con_close{
  position: absolute;
  left:calc(50% - 1.5rem);
  bottom:-5.2rem;
  width:3rem;
}
</style>
<body>
<div id="app" v-cloak>
  <div class="share_index_tk" v-if="showShare">
    <div class="share_index_tk_bg"></div>
    <div class="share_index_tk_con">
      <div class="share_index_tk_f1 clearfix">
         <div class="share_index_tk_f1_img">
           <img :src="shareInfo.head_img" alt="" width="100%">
         </div>
         <div class="share_index_tk_f1_txt">
           <h5>{{ shareInfo.username }}</h5>
           <p>{{ shareInfo.telephone }}</p>
         </div>
      </div>
      <div class="share_index_tk_f2">
        <img :src="shareInfo.invite_ewm" alt="">
        <h5>长按保存二维码</h5>
        <h6>赶紧分享邀请你的小伙伴来赚钱啦</h6>
      </div>
      <div class="share_index_tk_f3">
        <ul class="clearfix">
          <li @click="share_wx('session')">
            <img src="../../image/share/share_index_share1.png" alt="" >
            <span>微信</span>
          </li>
          <li @click="share_wx('timeline')">
            <img src="../../image/share/share_index_share2.png" alt="">
            <span>朋友圈</span>
          </li>
          <li>
            <img src="../../image/share/share_index_share3.png" alt="" @click="qqShare('QFriend')">
            <span>QQ</span>
          </li>
          <li>
            <img src="../../image/share/share_index_share4.png" alt="" @click="qqShare('qqShare')">
            <span>QQ空间</span>
          </li>
          <!-- <li>
            <img src="../../image/share/share_index_share1.png" alt="" @click="shareOther">
            <span>分享图片</span>
          </li> -->
        </ul>
      </div>
      <div class="share_index_tk_con_close" @click="cloneShare">
        <img src="../../image/share/share_index_share5.png" alt="" width="100%">
      </div>
    </div>
  </div>
  <!--  / warpper  -->
  <div class="warpper">

  <div class="aui-refresh-content">
  <div class="ind_user clearfix">
    <div class="ind_user_left">
      <div class="ind_user_img">
        <img :src="shareInfo.head_img" width="100%">
      </div>
      <div class="ind_user_txt">
        <h5>{{ shareInfo.username }}</h5>
        <p>{{ shareInfo.telephone }}</p>
      </div>
    </div>
    <div class="map_user">
      <div class="map_user1">
        <img src="../../image/share/share_index_nav2.png">
        <span>{{ shareInfo.location }}</span>
      </div>
      <div class="map_user1">
        <img src="../../image/share/share_index_nav3.png">
        <span>消息</span>
      </div>
    </div>
  </div>

  <div class="spacing10"></div>

  <div class="main_class">
    <ul class="clearfix">
    	<li onclick="goSharePeople()">
        <img src="../../image/share/share_index_sec1_1.png">
        <div class="main_class1">
          <h5>{{ shareInfo.share_person }}</h5>
          <h6>分享人数(人)</h6>
        </div>
      </li>
      <li onclick="goShareShop()">
        <img src="../../image/share/share_index_sec1_2.png">
        <div class="main_class1">
          <h5>{{ shareInfo.discount }}</h5>
          <h6>分享商品(笔)</h6>
        </div>
      </li>
      <li onclick="goShareCommission()">
        <img src="../../image/share/share_index_sec1_3.png">
        <div class="main_class1">
          <h5>{{ shareInfo.share_money }}</h5>
          <h6>总佣金(元)</h6>
        </div>
      </li>
    </ul>
  </div>

  <div class="spacing10"></div>

  <div class="mon_g">
    <div class="mon_g1 clearfix">
     <div class="mon_left">
       <p>分享领取佣金</p>
     </div>
     <div class="mon_right">
      <p>分享用户 成功注册 华富，分享商品<br/>并购买，您就可以赚取佣金</p>
     </div>
    </div>
  </div>

  <div class="spacing10"></div>

  <div class="share">
    <div class="share1">
      <h5>我的邀请码</h5>
      <a class="share_fxgz" href="user_gz.html">分享会员规则</a>
      <div class="share_con clearfix">
        <div class="share_con_l">
          <img :src="shareInfo.invite_ewm" width="100%">
        </div>
        <div class="share_con_r">
          <div class="share_con_r1">
            <p>赶紧分享邀请你的小伙伴来赚钱啦</p>
            <p style="margin-top:1.3rem;">你的邀请码：<span>{{ shareInfo.invite_code }}</span></p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="share_btn">
    <a @click="shareMsg">立即分享</a>
  </div>
  </div>

  </div>
  <!--  / warpper  -->
</div>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/axios.min.js"></script>
<script type="text/javascript" src="../../script/axios-config.js"></script>

<script type="text/javascript">

  apiready = function(){
    setRefresh()
  }
  var vue = new Vue({
      el: '#app',
      data: {
          shareInfo: {},
          showShare: false,
          invite_url2: ''
      },
      mounted() {},
      created: function() {
          this.getShareInfo();
      },
      computed: {
      },
      methods: {
          //获取列表
          getShareInfo: function() {
              var $_this = this;
              const data = {
                  token: $api.getStorage('token'),
                  invite_url: '../user/login/login.html'
              }
              console.log(JSON.stringify(data));
              Axios.post(window.Url.share_index, data).then(function(res) {
                  console.log(JSON.stringify(res))
                  if (res.status == 1) {
                    $_this.shareInfo = res;
                    $_this.invite_url2 = res.invite_url;
                  } else {
                      $_this.shareInfo = {};
                      api.toast({
                          msg: res,
                          duration: 2000,
                          location: 'bottom'
                      });
                  }
              }).catch((err) => {
                  $_this.shareInfo = {}
                  api.alert({
                      msg: JSON.stringify(err)
                  });
              })
          },
        shareMsg: function() {
          this.showShare = true;
        },
        share_wx: function(type) {
          var $_this = this;
          var wx = api.require('wx');
          wx.shareWebpage({
               apiKey: '',
               scene: type,
               title: '华富商城-分享',
               description: '华富商城',
               thumb: 'http://huafu.unohacha.com/Public/home/images/icon.png',
               contentUrl: 'http://huafu.unohacha.com/Member/register?invite_code=' + $_this.shareInfo.invite_code
           }, function(ret, err) {
             // console.log(JSON.stringify(res.share_info.share_title))
             console.log(ret.status)
               if (ret.status) {
                   // alert('分享成功');
                   api.toast({
                       msg: '分享成功',
                       duration: 2000,
                       location: 'bottom'
                   });
               } else {
                 api.toast({
                     msg: '分享失败',
                     duration: 2000,
                     location: 'bottom'
                 });
               }
           });
        },
        //QQ分享
        qqShare: function(type) {
          var $_this = this;
          var qq = api.require('QQPlus');
          qq.shareNews({
              url: 'http://huafu.unohacha.com/Member/register?invite_code=' + $_this.shareInfo.invite_code,
              title: '华富商城-分享',
              description: '华富商城',
              imgUrl: 'http://huafu.unohacha.com/Public/home/images/icon.png',
              type: type
          },function(ret,err){
            console.log(ret.status)
            if (ret.status){
              api.toast({
                  msg: '分享成功',
                  duration: 2000,
                  location: 'bottom'
              });
            } else {
              api.toast({
                  msg: '分享失败',
                  duration: 2000,
                  location: 'bottom'
              });
            }
          });
        },
        shareOther: function() {
          api.toast({
              msg: '功能正在接入中...',
              duration: 2000,
              location: 'middle'
          });
        },
        cloneShare: function() {
          this.showShare = false;
        }
      }
  })
  //刷新
  function setRefresh(){
      var pullRefresh = new auiPullToRefresh({
          container: document.querySelector('.aui-refresh-content'),
          triggerDistance: 100
      }, function(ret) {

          if (ret.status == "success") {
              setTimeout(function() {
                  pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
              }, 1500)
          }
      })
  }

  function goSharePeople(){
    api.openWin({
        name: 'sharePeople',
        url: './share_people.html',
        pageParam: {
            test:''
        }
    });
  }
  function goShareShop(){
    api.openWin({
        name: 'shareShop',
        url: './share_shop.html',
        pageParam: {
            test:''
        }
    });
  }

  function goShareCommission(){
    api.openWin({
        name: 'shareCommission',
        url: './share_commision.html',
        pageParam: {
            test:''
        }
    });
  }


</script>
